<style lang="scss" scoped>
    .index-label{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: #fff;
        margin-right: 5px;
    }
</style>
<template>
    <section>
        <center-title>4D观测</center-title>
        <div v-if="isDataReady" class="bg-white p20">
            <div v-for="(g1,key1) in dataGroup" >

                <div class="text-center mb20 f18 f-color-grey f30">{{key1}}</div>

                <div class="flex flex-wrap">
                    <div v-for="(g2,key2) in g1" style="width:530px" class="mb40 ml20 mr50">
                        <ui-title class="title">{{key2}}</ui-title>
                        <div v-for="(item,i) in g2" class="flex col-center f-color-text mb20">
                            <span class="index-label mr10" :style="{background:indexColor[i]||'#ddd'}">
                                <i>{{i+1}}</i>
                            </span>
                            <div v-if="item.name" class="flex col-center">
                                <div class="mr20 f16 clamp-1" style="width:100px;height:22px">{{item.name}}</div>

                                <el-progress v-if="item.percent" :percentage="getPercentage(item.percent)" :status="item.percent<0?'exception':''" :show-text="false" class="mr20" style="width:240px"></el-progress>

                                <div class="f14">高于同行{{parseFloat(item.percent).toFixed(2)}}%</div>
                            </div>
                            <div v-else class="f-color-grey f16">暂无数据</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</template>
<script>
    import centerTitle from './title.vue'
    export default {
        components:{
            centerTitle
        },
        data(){
            return {
                indexColor:['#cc8bf7','#20a0ff','#3db96d'],
                dataGroup:{
                    '产品':{},
                    '运营':{},
                    '硬件':{},
                    '客服':{},
                },
                isDataReady:false
            }
        },
        mounted(){
            this.$http.get('index.php?g=home&m=paperRecord&a=get_node4d_list&paper_id=13', {
            })
            .then(({data})=>{
                // console.log('4D观测',data)
                if (data.code===1) {
                    let d = data.data
                    for (let key in d) {
                        if (key=='颜值高' || key=='最好用' || key=='前端强' || key=='平台多') {
                            this.dataGroup['产品'][key] = d[key]
                        }
                        else if(key=='知名度' || key=='品牌力' || key=='活动力' || key=='用户力'){
                            this.dataGroup['运营'][key] = d[key]
                        }
                        else if(key=='稳定度' || key=='坚固度' || key=='安全度' || key=='通畅度'){
                            this.dataGroup['硬件'][key] = d[key]
                        }
                        else if(key=='响应快' || key=='服务好' || key=='专业强' || key=='最惊喜'){
                            this.dataGroup['客服'][key] = d[key]
                        }
                    }

                    this.isDataReady = true

                    // console.log('4D观测-格式化数据',this.dataGroup);
                }
            })
        },
        methods:{
            getPercentage(v){
                let n = Math.abs(parseFloat(v))
                return n>100?100:n
            }
        },
    }
</script>